<template>
  <div class="forgetpassw">
    <div class="left">
      <div class="imga"></div>
    </div>
    <div class="right">
      <form action="" @submit.prevent="handleSend">
        <div class="title">重置密码</div>
        <div class="email">
          <div class="wenzi">邮箱</div>
          <input type="email" v-model.trim="email" />
        </div>
        <button class="submit">发送</button>
        <div class="had">您已有账号？ <span @click="push('/login-manage')"> 用户登录</span></div>
        <div class="register">建立新账号？ <span @click="push('/login-manage/register')">用户注册</span></div>
      </form>
    </div>
  </div>
</template>

<script>
import { ElNotification, ElMessage } from 'element-plus'
import { isHaveEmail } from '../../services/index'
import { useRouter } from 'vue-router'
import { ref, h } from 'vue'

export default {
  setup(props) {
    const Router = useRouter()
    let email = ref('')

    async function handleSend() {
      if (email.value === '') {
        ElNotification({
          title: 'Title',
          message: h('i', { style: 'color: teal' }, '请填写')
        })
        return
      }
      let res = await isHaveEmail(email.value)
      if (res.length) {
        Router.push({
          path: '/login-manage/resetpassword',
          query: {
            email: JSON.stringify(res[0])
          }
        })
      } else {
        ElMessage({
          message: '该邮箱未注册',
          type: 'warning'
        })
      }
    }
    return {
      handleSend,
      push: Router.push,
      email
    }
  }
}
</script>

<style lang="less">
@import '../auto_css/ForgetPassw.less';
</style>
